<template>
  <div class="container">
    <header>
      <img class="logo" src="@/assets/images/logo.jpg" alt="" />
    </header>
    <div class="main-continer">
      <main>
        <article>
          <img class="banner" src="@/assets/images/banner.jpg" alt="" />
        </article>
        <aside>
          <div class="loginform">
            <div class="qrcode">
              <img src="@/assets/images/code.jpg" alt="" />
            </div>
            <h2>账号登录</h2>
            <el-form :model="form" :rules="rules" ref="ruleForm">
              <el-form-item prop="username">
                <el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="form.username"> </el-input>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="form.pass"> </el-input>
              </el-form-item>
              <el-form-item prop="verifyCode">
                <el-input class="code-input" placeholder="请输入验证码" v-model="form.verifyCode"> </el-input>
                <el-image class="code-img" @click="changeImage" :src="imageCode">
                  <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                </el-image>
              </el-form-item>
              <el-form-item class="forget-pwd"> 忘记密码? </el-form-item>
            </el-form>
            <div>
              <el-button class="loginbtn" type="primary" @click="submitForm('ruleForm')" :loading="isLogining">{{
                isLogining ? '正在登录...' : '登录'
              }}</el-button>
            </div>
          </div>
        </aside>
      </main>
    </div>
    <footer>
      <div>北京乐宁科技@2023 京ICP备17033472号-4</div>
    </footer>
  </div>
</template>

<script>
import { authCode, checkloginByCode } from '@/api/administrator'
export default {
  name: 'LoginView',
  data() {
    return {
      form: {
        username: null,
        pass: null,
        verifyCode: null,
      },
      imageCode: '',
      imageToken: null,
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      isLogining: false,
    }
  },
  created() {
    this.getauthCode()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isLogining = true
          try {
            this.form.token = this.imageToken
            let logininfo = await this.login()
            this.$store.dispatch('loginAsync', logininfo)

            // 重置路由添加状态
            this.$store.commit('setIsAddRoute', false)

            // 成功提示
            this.$message.success('登录成功')

            // 确保状态完全更新后再跳转
            this.$nextTick(() => {
              // 使用setTimeout确保所有状态更新完成
              setTimeout(() => {
                this.isLogining = false
                // 跳转到首页
                this.$router.push('/home').catch((err) => {
                  console.error('路由跳转失败:', err)
                  // 跳转失败时使用window.location
                  window.location.hash = '#/home'
                })
              }, 200)
            })
          } catch (err) {
            this.isLogining = false
            console.error('登录失败:', err)
            if (err.message) {
              this.$message.error(err.message)
            } else {
              this.$message.error('登录失败，请检查用户名、密码和验证码')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async login() {
      try {
        let { data } = await checkloginByCode(this.form)
        // 检查返回数据是否有效
        if (!data || !data.token) {
          throw new Error('登录响应数据异常')
        }
        localStorage.setItem('token', data.token)
        return data
      } catch (err) {
        console.error('登录API调用失败:', err)
        if (err.response && err.response.data) {
          const errMsg = err.response.data.errMsg || '登录失败'
          throw new Error(errMsg)
        } else {
          throw new Error('验证码错误')
        }
      }
    },
    async getauthCode() {
      let { imageCode, token } = await authCode()
      ;(this.imageCode = imageCode), (this.imageToken = token)
    },
    changeImage() {
      this.getauthCode()
    },
  },
}
</script>
<style lang="less">
@import '../assets/css/login.less';
</style>
